<template>
  <div :mathpower="mathpower">
    <div class="cover" v-if="showCover" @click="close"></div>
    <transition name="scale">
      <div id="agreement" v-if="showAg">
        <div class="content">
          <div class="d1">
            <p class="title">我的有效算龄</p>
            <p class="myPowerNum">{{power}} T*天</p>
          </div>
          <div class="width100 height100 html" id="html">
            人人矿场将在全球率先开创pow+pos的深度混合模式进行数字货币的“挖掘”"，矿场会根据您当前的可信算力时长(T*天)进行人人矿场的算力额度授信，授信方式为等值的BHP,届时您可用此授信额度进行矿机的下单，下单的矿场算力在产出btc的同时还会附加产出一定比例的BHP,BHP可到交易市场进行流通!
          </div>
        </div>
        <p class="btns">
          <button class="close">
            <img src="../common/imgs/yuancha.png" @click="close" alt="">
          </button>
        </p>
      </div>
    </transition>
  </div>
</template>

<script>
  //import AgreeMent from '../../components/AgreeMent';
  //<agree-ment ref="ag" hasReadText="我已阅读并同意此协议" @isRead="function(){}"></agree-ment>
  //@isRead="function(){}"  点击弹窗下方的“已阅读” 执行函数
  //this.$refs.ag.agreement('协议内容');添加协议内容

  export default {
    name: "AgreeMent",
    data(){
      return{
        introduce:'协议弹窗',
        showCover:false,
        showAg:false,
        power:'',
      }
    },
    props: {
      'mathpower': {
        /*已阅读文字*/
        type: String,
        default: ''
      },
    },
    mounted(){
      this.power = this.mathpower ? this.mathpower : '1000';
    },
    methods:{
      show(){
        this.showCover = true;
        this.showAg = true;
      },
      close(){
        this.showAg = false;
        // this.canScroll();
        let thiz = this;
        var timeout = setTimeout(function () {
          clearTimeout(timeout);
          timeout = null;
          thiz.showCover = false;
        },200)

      }
    }
  }
</script>

<style type="text/less" lang="less" scoped>
  #agreement{
    text-align: left;font-size: 0.28rem!important;position: fixed;z-index: 6;background: none;overflow: hidden;border-radius: 0.06rem;padding: 0;
    width: 4.92rem;min-height: 4.92rem;top: 50%;left: 50%;margin-left: -2.46rem;margin-top: -3.2rem;
  }
  .content{
    background: #fff;border-radius: 0.04rem;overflow: hidden;
    >.d1{
      background: #FFD940;text-align: center;padding-bottom: 0.28rem;
      >.title{
        color: rgba(38, 38, 38, 0.65);font-size: 0.22rem;padding-top: 0.32rem;
      }
      >.myPowerNum{
        color: #262626;font-size: 0.3rem;padding-top: 0.2rem;
      }
    }
    >#html{
      color: #898989;font-size: 0.24rem;text-align: left;padding: 0.28rem;line-height: 170%;
    }
  }
  .btns{
    text-align: center;padding-top: 0.48rem;
    >button{
      width: 0.48rem;padding: 0;height: 0.48rem;
      >img{
        width: 100%;height: auto;
      }
    }
  }
  @media screen and (min-width: 1025px){
    #agreement{width: 370px;left: 50%;margin-left: -185px;}
  }
  .close{
    background: none;padding:0.35rem;
    img{
      width: 0.38rem;height: 0.38rem;
    }
  }
  #html /deep/ *{
    margin: initial!important;
    padding: inherit!important;
    line-height: inherit!important;
  }
  #agreement>div::-webkit-scrollbar {width:2px; height:10px;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  #agreement>div::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);} /*定义滚动条轨道 内阴影+圆角*/
  #agreement>div::-webkit-scrollbar-thumb {background-color: #ffa205; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.2);} /*定义滑块 内阴影+圆角*/

  /*动画*/
  #agreement{
    -webkit-transition: all 0.2s ease-in;transition: all 0.2s ease-in;
  }
  @media screen and (min-width: 1025px) {
    .window{width:  424px;left: 50%;margin-left:-212px;}
  }
</style>
